/**
 * 
 * Draggble(dom,{x:true,y:true})
 */
(function() { //保证定义的变量不影响到外部
	//获取非行间样式
	var getStyle = function(ele, attr) {
		return getComputedStyle ? getComputedStyle(ele)[attr] : ele.currentStyle[attr];
	}
	//获取元素距离window的位置
	var offsetPage = function(ele) {
		var site = {
			left: ele.offsetLeft,
			top: ele.offsetTop
		}
		while(ele.offsetParent) {
			ele = ele.offsetParent;
			site.left += ele.offsetLeft;
			site.top += ele.offsetTop;
		}
		return site;
	}
	//获取鼠标在页面中的绝对位置
	var offset_x_y = function(e) {
		var site = {
			x: e.clientX + document.body.scrollLeft || document.documentElement.scrollLeft,
			y: e.clientY + document.body.scrollTop || document.documentElement.scrollTop
		}
		return site;
	}
	//给某元素添加事件
	var addEvent = (function() {
		if(window.VBArray) {
			return function(ele, eventName, callback) {
				ele.attachEvent("on" + eventName, callback);
			}
		}
		return function(ele, eventName, callback, isCapture) {
			ele.addEventListener(eventName, callback, !!isCapture);
		}
	})();
	//移除某元素事件
	var removeEvent = (function() {
		if(window.VBArray) {
			return function(ele, eventName, callback) {
				ele.detach("on" + eventName, callback);
			}
		}
		return function(ele, eventName, callback) {
			ele.removeEventListener(eventName, callback);
		}
	})();
	//合并参数
	function merge_attr(a, b) {
		for(var attr in b) {
			a[attr] = b[attr];
		}

	}
	
	window.draggable = function(ele, _options) {
		//若元素的无定位属性或定位属性不为absolute(或fixed)则退出
		if(!(getStyle(ele, 'position') == "absolute" || getStyle(ele, 'position') == "fixed")) return;
		var options = { //默认参数
			x: true, // 水平方向是否可拖拽
			y: true, // 垂直方向是否可拖拽
			limit: true, // 活动范围是否限制在父元素内 
			/*paddingTop: 0, // 父元素内填充
			paddingRight: 0,
			paddingBottom: 0,
			paddingLeft: 0,
			marginTop: 0, // 当前元素外边界
			marginRight: 0,
			marginBottom: 0,
			marginLeft: 0,*/
			offsetParentTop: 0, //相对于父元素的偏移量,在父元素范围内的偏移量,当limit：true才生效
			offsetParentRight: 0,
			offsetParentBottom: 0,
			offsetParentLeft: 0,
			callback: function() {
				/**
				 * 回调函数，在拖拽过程中不断触发
				 * 两个参数分别为：拖拽元素的可活动范围大小，拖拽元素在可活动范围内的坐标
				 * section包括：minLeft/maxLeft/minTop/maxTop
				 * distance 包括：x/y
				 * 绑定this，回调函数中可以直接使用this来指向拖拽元素ele本身
				 */
			}
		}
		_options && merge_attr(options, _options); //若_options存在则合并参数

		console.log(options);
		var startPoint = { //记录鼠标初始值
			x: offsetPage(ele).left,
			y: offsetPage(ele).top
		}
		//拖动范围最大值最大值,
		var maxWidth = ele.offsetParent.offsetWidth - ele.offsetWidth - options.offsetParentRight;
		var maxHeight = ele.offsetParent.offsetHeight - ele.offsetHeight - options.offsetParentBottom;
		addEvent(ele, 'mousedown', function(e) { //鼠标单击事件

			e = e || event;

			//初始时鼠标相对于ele的位置：鼠标距离页面边距 - 元素到页面边距，
			//因为该元素内部不能保证没有其他的定位元素
			//用来保存鼠标在元素上的相对位置
			var mouseOffset = {
				x: offset_x_y(e).x - offsetPage(ele).left,
				y: offset_x_y(e).y - offsetPage(ele).top
			}
			var ele_mouseover = function(e) { //鼠标移动执行函数

				e = e || event;
				var mouse_current = { //鼠标当前距离页面绝对位置
					x: offset_x_y(e).x,
					y: offset_x_y(e).y
				}
				var ele_parent = { //父节点距离页面位置
					left: offsetPage(ele.offsetParent).left,
					top: offsetPage(ele.offsetParent).top
				}

				//因为此处ele相对于的是父元素做的定位，父元素不一定是body
				var _left = mouse_current.x - ele_parent.left - mouseOffset.x; //鼠标与元素相对静止
				var _height = mouse_current.y - ele_parent.top - mouseOffset.y;
				options.x && (ele.style.left = (options.limit ? (Math.min(maxWidth, Math.max(options.offsetParentLeft, _left))) : _left) + "px");
				options.y && (ele.style.top = (options.limit ? (Math.min(maxHeight, Math.max(options.offsetParentTop, _height))) : _height) + "px");
				options.callback.call(ele, {
					x: offsetPage(ele).left - startPoint.x,
					y: offsetPage(ele).top - startPoint.y
				});
			}

			addEvent(document, 'mousemove', ele_mouseover);

			addEvent(document, 'mouseup', function() {
				removeEvent(document, 'mouseover', ele_mouseover);
			});

		});

	}

})();